﻿<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="css/mapdemo.css" rel="stylesheet" />
       <script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
        <script>
            function init() {
                document.getElementById("location").innerHTML = "begion now";
                if (navigator.geolocation) {

                    function hasPosition(position) {

                        // Show location infomation
                        document.getElementById("jingdu").innerHTML = position.coords.latitude;
                        document.getElementById("weidu").innerHTML = position.coords.longitude;

                        // navigate to current postion
                        var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                        myOptions = {
                            zoom: 15,
                            center: point,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        },

                        mapDiv = document.getElementById("maparea"),
                        map = new google.maps.Map(mapDiv, myOptions),

                        marker = new google.maps.Marker({
                            position: point,
                            map: map,
                            title: "You are here"
                        });
                    }
                    navigator.geolocation.getCurrentPosition(hasPosition);
                }
                else {

                    document.getElementById("location").innerHTML = "I can't find your location";
                }
            }

            function postMessage() {

                // record use posted message
                var locationString = document.getElementById("jingdu").innerText + "," + document.getElementById("weidu").innerText;
                var requestString = "savelocation.asp?message=" + document.getElementById("helpmessage").value + "&" + "location="+locationString;

                // Send request
                var xmlhttp;
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }


                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        loadMapData();
                    }
                }
                xmlhttp.open("GET", requestString, true);
                xmlhttp.send();
            }

            function loadMapData() {

                // load map data
                document.getElementById("location").innerHTML = "message saved";

                // Read xml file
                if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                }
                else {// code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                var fileName = "data.xml?id=" + Math.random(10);
                xmlhttp.open("GET", fileName, false);
                xmlhttp.send();
                xmlDoc = xmlhttp.responseXML;
                var infohtml="list xml data";
                infohtml+="<table border='1'>";
                var x = xmlDoc.getElementsByTagName("mapdata");
                for (i = x.length-1; i >1; i--) {
                    infohtml+="<tr><td>";
                    infohtml+=x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue;
                    infohtml+="</td><td>";
                    infohtml+=x[i].getElementsByTagName("location")[0].childNodes[0].nodeValue;
                    infohtml+="</td></tr>";
                }
                infohtml += "</table>";
                document.getElementById("xml").innerHTML=infohtml;

            }
</script>

    </head>
    <body onload="init()">
        <section class="wrapper">
        <div id="maparea">main 
           
        </div>
        <div id="side">
             <div id="infoarea" >Info area
                  <h5 id="location" hidden> your location:</h5>
                 <p id="jingdu" hidden></p>
                 <p id="weidu" hidden></p>
                 <h5 id="xml"></h5>
             </div>
             <div id="postmessage">
                 <h3>Post message here</h3>
                 <input type="text" id="helpmessage" />
                 <br>
                 <input type="button" id="SendMessage" value="SendMessage" onclick="postMessage()" />
             </div>

        </div>
        </section>
    </body>
</html>
